<template>
	<!-- 过渡动画 -->
    <!--<transition name="fade" ref="viewImage">-->
        <!-- 遮罩层 -->
        <div class="img-layer">
        	<div class="vertify-center" @click="bigImg">
            	<img v-lazy="imgsrc">
           	</div>
           	<button v-if=" undefined != imgIndex " class="arrow-button left-img yl-imgback" @click="arrowLeft"></button>
        	<button v-if=" undefined != imgIndex " class="arrow-button right-img yl-imgforward" @click="arrowRihgt"></button>
        </div>
    <!--</transition>-->
</template>
<script>
	export default{
		data () {
			return {
				msg:'放大图片'
			}
		},
		created () {

		},
		mounted () {

		},
		props :['imgsrc','imgIndex'],
		methods : {
			bigImg() {
	            // 发送事件
	            this.$emit('clickit')
	        },
	        //朝左
	        arrowLeft () {
	        	this.$emit("changeImg" , this.imgIndex) ;
	        },
	        //朝右
	        arrowRihgt () {
	        	console.log("arrowright ...") ;
	        }
		},
	}
</script>
<style scoped>
	/*动画*/
	.fade-enter-active,
	.fade-leave-active {
	    transition: all .2s linear;
	    transform: translate3D(0, 0, 0);
	}

	.fade-enter,
	.fade-leave-active {
	    transform: translate3D(100%, 0, 0);
	}

	/*遮罩层样式*/
	.img-layer {
	    position: fixed;
	    z-index: 3;
	    top: 0;
	    left: 0;
	    bottom:0;
	    right:0;
	    background: rgba(0, 0, 0, 1);
	    width: 100vw;
	}

	/*不限制图片大小，实现居中*/
	.img-layer img {
	    max-width: 100%;
	    display: inline-block;
	}
	.vertify-center{
		height:100vh;
		width:100vw;
		line-height:100vh;
		display:flex;
		justify-content:center;
		align-items:Center;
	}
	.arrow-button{
		background: none;
	    top: 50%;
	    margin-top: -50px;
	    width: 70px;
	    height: 100px;
	    position: absolute;
	    float:left;
	    will-change:opacity;
	    border:0;
	}
</style>
